<template>
	<div>
		<div >
			<el-form class="form-container" :model="form">
				<el-form-item label="教师编号" label-width="60px" style="width: 280px;" inline>
					<el-input placeholder="请输入教师编号" v-model="form.code"></el-input>
				</el-form-item>
				<el-form-item label="性别" label-width="60px">
					<el-radio-group v-model="form.sex">
						<el-radio-button label="不限" value="0" />
						<el-radio-button label="男" value="1" />
						<el-radio-button label="女" value="2" />
					</el-radio-group>
				</el-form-item>
				<el-form-item class="inline-form-item">
					<el-button type="primary" color="green" :icon="Search" title="教师查询"></el-button>
				</el-form-item>
			</el-form>
		</div>
		<div style="text-align: right;margin-bottom: 2px;">
			<el-button type="primary"  :icon="Plus" title="创建学生" @click="showCreateDialog"></el-button>
		</div>
		<el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true" empty-text="未查询任何学生信息">
			<el-table-column label="序号" header-align="center" width="60" align="right">
              <template #default="scope">
                 <span>{{scope.$index+1}}</span>
			  </template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" header-align="center"  />
			<el-table-column prop="code" label="编号" header-align="center" width="200" />
			<el-table-column prop="grade" label="职称" header-align="center"/>
			<el-table-column prop="mobile" label="手机号" header-align="center" align="center" />
			<el-table-column prop="nation" label="民族" header-align="center" />
			<el-table-column prop="polit" label="政治面貌" header-align="center" />
			<el-table-column prop="sex" label="性别"  header-align="center" align="center">
				<template #default="scope">
					<span v-if="1==scope.row.sex">
						<span style="color: blue;">男</span>
					</span>
					<span v-else-if="2==scope.row.sex">
						<span style="color: red;">女</span>
					</span>
					<span v-else>
						<span style="color: gold;">未知</span>
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" header-align="center">
				<template #default="scope">
					<el-button type="info" :icon="ZoomIn" title="详情" color="green" @click="showDetailsDialog(scope.$index)"></el-button>
					<el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
					<el-button type="danger" :icon="Delete" title="删除" @click="showDeleteDialog(scope.$index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 删除确认框开始 -->
		<el-dialog v-model="deleteDialogVisiable" title="删除员工" width="500" destroy-on-close center>
			<span>确认要删除员工【{{current.name}}】吗?</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="deleteDialogVisiable = false">取消</el-button>
					<el-button type="primary" @click="deleteStudent">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 删除确认框结束 -->
		<!-- 创建学生对话框 -->
		<CreateDialog ref="createDialog"></CreateDialog>
		<!-- 修改学生对话框 -->
		<ModifyDialog ref="modifyDialog"></ModifyDialog>
		<!-- 显示学生详细信息-->
		<DetailsDialog ref="detailsDialog"></DetailsDialog>
		
	</div>
</template>

<script setup>
	//导入图标
	import {
		ZoomIn,
		Plus,
		Delete,
		Edit,
		Search
	} from '@element-plus/icons-vue';
	import {ref } from 'vue';
	import { ElMessage } from 'element-plus'
	//创建教师对话框
	import CreateDialog from './CreateDialog.vue';
	//修改教师对话框
	import ModifyDialog from './ModifyDialog.vue';
	//显示教师详细信息
	import DetailsDialog from './DetailsDialog.vue';
	//删除Dialog对话框是否可见
	const deleteDialogVisiable = ref(false);
	//当前操作对象
	const current = ref({});
	//查询表单响应数据
	const form=ref({
		sex:'0',
		code:''
	});
	//当前删除记录索引
	const tableData =ref( [{
            name: '朱一丹',
            code: 'T001',
            nation: '汉族',
            polit: '共产党员',
            sex: '1',
            birthday: '2003-10-11',
            mobile: '15905539558',
						grade:'副教授'
        },
        {
            name: '李华',
            code: 'T002',
            nation: '蒙古族',
            polit: '共青团员',
            sex: '2',
            birthday: '2004-03-20',
            mobile: '13800138000',
						grade:'讲师'
        }
	]);
	let createDialog = ref(null);
	let modifyDialog=ref(null);
	let detailsDialog=ref(null);
	//打开删除学生对话框
	const showDeleteDialog = (rowIndex) => {
		current.value=tableData.value[rowIndex];
		deleteDialogVisiable.value = true;
		//记录待删除的学生记录索引
		current.value.rowIndex=rowIndex;
	}
	//打开修改学生对话框
	const showModifyDialog = (rowIndex) => {
		modifyDialog.value.dialogVisible = true;
		modifyDialog.value.form=tableData.value[rowIndex];
	}
	//打开显示详细信息对话框
	const showDetailsDialog = (rowIndex) => {
		detailsDialog.value.dialogVisible = true;
		detailsDialog.value.student=tableData.rowIndex[rowIndex];
	}
	//打开创建学生对话框
	const showCreateDialog = () => {
		createDialog.value.dialogVisible = true;
	}
	//删除学生
	const deleteStudent=()=>{
		deleteDialogVisiable.value = false;
		let rowIndex=current.value.rowIndex;
		tableData.value.splice(rowIndex,1);
		ElMessage({message:'删除成功', type: 'success',});
	}
</script>
<style scoped>
	.form-container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row; 
	
	}
	.inline-form-item {
		margin-left: 20px;
	}
</style>